<template>
	<view class="template-618">
		<block v-if="show">
			<movable-area class="share">
				<movable-view direction="all" class="share-img">
					<image 
						src="https://jiajudashi.oss-cn-shenzhen.aliyuncs.com/images/shop/icons/national-day/share.png?v=1" 
						@click="share">
					</image>
				</movable-view>
			</movable-area>
			<view class="template-618-header">
				<image src="https://jiajudashi.oss-cn-shenzhen.aliyuncs.com/images/shop/2021-618/pic.png?v=1" mode="widthFix"></image>
			</view>
			<view class="template-618-box">
				<view class="template-618-box-contain">
					
					<view class="template-618-1">
						<view class="template-618-title">
							<image :src="shelf1.image"></image>
						</view>
						<view class="contain-box">
							<view class="contain-box-top">
								<image src="https://jiajudashi.oss-cn-shenzhen.aliyuncs.com/images/shop/2021-618/red-top.png" mode="widthFix"></image>
							</view>
							<view class="contain-box-center">
								<view class="template-618-1-item" v-for="(data,index) in shelf1.goods_list" :key="index" @click="goInfo(data.goods_type,data.goods_id,'618活动-'+shelf1.name)">
									<view class="template-618-1-item-image">
										<image :src="data.image" mode="aspectFit"></image>
									</view>
									<view class="template-618-1-item-info">
										<view class="goods-name">{{data.goods_name}}</view>
										<view class="goods-price">活动价：<text>￥</text><text class="num">{{data.retail_price}}</text></view>
										<view class="goods-btn">立即抢购</view>
									</view>
								</view>
							</view>
							<view class="contain-box-bot">
								<image src="https://jiajudashi.oss-cn-shenzhen.aliyuncs.com/images/shop/2021-618/red-bot.png" mode="widthFix"></image>
							</view>
						</view>
					</view>
					
					<view class="template-618-1 template-618-2">
						<view class="template-618-title">
							<image :src="shelf2.image"></image>
						</view>
						<view class="contain-box">
							<view class="contain-box-top">
								<image src="https://jiajudashi.oss-cn-shenzhen.aliyuncs.com/images/shop/2021-618/blue-top.png" mode="widthFix"></image>
							</view>
							<view class="contain-box-center">
								<view class="template-618-1-item" v-for="(data,index) in shelf2.goods_list" :key="index" @click="goInfo(data.goods_type,data.goods_id,'618活动-'+shelf1.name)">
									<view class="template-618-1-item-image">
										<image :src="data.image" mode="aspectFill"></image>
									</view>
									<view class="template-618-1-item-info">
										<view class="goods-name">{{data.goods_name}}</view>
										<view class="goods-price">活动价：<text>￥</text><text class="num">{{data.retail_price}}</text></view>
										<view class="goods-btn">立即抢购</view>
									</view>
								</view>
							</view>
							<view class="contain-box-bot">
								<image src="https://jiajudashi.oss-cn-shenzhen.aliyuncs.com/images/shop/2021-618/blue-bot.png" mode="widthFix"></image>
							</view>
						</view>
					</view>
					
					<view class="template-618-1 template-618-3">
						<view class="template-618-title">
							<image :src="shelf3.image"></image>
						</view>
						<view class="contain-box">
							<view class="contain-box-top">
								<image src="https://jiajudashi.oss-cn-shenzhen.aliyuncs.com/images/shop/2021-618/red-top.png" mode="widthFix"></image>
							</view>
							<view class="contain-box-center">
								<view class="template-618-3-items">
									<view class="template-618-3-item" v-for="(data,index) in shelf3.goods_list" :key="index" @click="goInfo(data.goods_type,data.goods_id,'618活动-'+shelf1.name)">
										<view class="item-image">
											<image :src="data.image" mode="widthFix"></image>
										</view>
										<view class="item-goods-info">
											<view class="item-goods-name">{{data.goods_name}}</view>
											<view class="item-goods-line"></view>
											<view class="item-goods-des">{{data.brief}}</view>
											<view class="item-goods-btn">
												<view class="symbol">
													活动价：
												</view>
												<text class="num"><text>￥</text>{{data.retail_price}}</text>
												<view class="btn">
													<image src="https://jiajudashi.oss-cn-shenzhen.aliyuncs.com/images/shop/2021-618/buy-btn.png"></image>
												</view>
											</view>
										</view>
									</view>
								</view>
								<!-- <view class="more" @click="loadMore(1)">
									<template v-if="!loadingMore1 && !noMore1">
										点击加载更多 <view class="more-arrow"><u-icon name="arrow-down-fill" color="#FFF1CA" size="16"></u-icon></view>
									</template>
									<template v-if="loadingMore1">
										<u-loading mode="flower" style="margin-right: 10rpx;" color="#A45B20"></u-loading>正在加载
									</template>
									<template v-if="noMore1">
										没有更多了
									</template>
								</view> -->
							</view>
							<view class="contain-box-bot">
								<image src="https://jiajudashi.oss-cn-shenzhen.aliyuncs.com/images/shop/2021-618/red-bot.png" mode="widthFix"></image>
							</view>
						</view>
					</view>
					
					<view class="template-618-1 template-618-3 template-618-4">
						<view class="template-618-title">
							<image :src="shelf4.image"></image>
						</view>
						<view class="contain-box">
							<view class="contain-box-top">
								<image src="https://jiajudashi.oss-cn-shenzhen.aliyuncs.com/images/shop/2021-618/blue-top.png" mode="widthFix"></image>
							</view>
							<view class="contain-box-center">
								<view class="template-618-3-items">
									<view class="template-618-3-item" v-for="(data,index) in shelf4.goods_list" :key="index" @click="goInfo(data.goods_type,data.goods_id,'618活动-'+shelf1.name)">
										<view class="item-image">
											<image :src="data.image" mode="widthFix"></image>
										</view>
										<view class="item-goods-info">
											<view class="item-goods-name">{{data.goods_name}}</view>
											<view class="item-goods-line"></view>
											<view class="item-goods-des">{{data.brief}}</view>
											<view class="item-goods-btn">
												<view class="symbol">
													活动价：
												</view>
												<text class="num"><text>￥</text>{{data.retail_price}}</text>
												<view class="btn">
													<image src="https://jiajudashi.oss-cn-shenzhen.aliyuncs.com/images/shop/2021-618/buy-btn.png"></image>
												</view>
											</view>
										</view>
									</view>
								</view>
								<!-- <view class="more" @click="loadMore(2)">
									<template v-if="!loadingMore2 && !noMore2">
										点击加载更多 <view class="more-arrow"><u-icon name="arrow-down-fill" color="#FFF1CA" size="16"></u-icon></view>
									</template>
									<template v-if="loadingMore2">
										<u-loading mode="flower" style="margin-right: 10rpx;" color="#A45B20"></u-loading>正在加载
									</template>
									<template v-if="noMore2">
										没有更多了
									</template>
								</view> -->
							</view>
							<view class="contain-box-bot">
								<image src="https://jiajudashi.oss-cn-shenzhen.aliyuncs.com/images/shop/2021-618/blue-bot.png" mode="widthFix"></image>
							</view>
						</view>
					</view>
					
				</view>
			</view>
		</block>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// loadingMore1: false,
				// noMore1: false,
				// loadingMore2: false,
				// noMore2: false
				show: false,
				show: false,
				shelf1: {},
				shelf2: {},
				shelf3: {},
				shelf4: {},
				posterImg: ''
			};
		},
		onLoad(options) {
			this.init()
			if(uni.getStorageSync('userInfo')){
				this.addFoot('查看618活动')
			}
			// 如果用户从分享的小程序卡片或扫描二维码进来的,设置一个url缓存,登录后返回当前缓存url
			let pages = getCurrentPages();
			let curPage = pages[pages.length - 1];
			uni.setStorageSync('newurl',curPage.$page.fullPath)
			if(options.parent_id){
				uni.setStorageSync('parent_id',options.parent_id)
				this.$u.api.binding_refer({id: options.parent_id}).catch(() => {
					// console.log('接口报错：绑定失败')
				})
			}
			let scene
			if(options.scene){
				scene = decodeURIComponent(options.scene)
				uni.setStorageSync('parent_id',this.filterUrlParam(scene).parent_id)
				this.$u.api.binding_refer({id: this.filterUrlParam(scene).parent_id}).catch(() => {
					console.log('接口报错：绑定失败')
				})
			}
		},
		methods: {
			// 解析小程序scene参数
			filterUrlParam(urlSearch){
			  let ret = {}
			  let regParam = /([^&=]+)=([\w\W]*?)(&|$|#)/g
			  if (urlSearch) {
			    var strParam = urlSearch;
			    var result
			    while ((result = regParam.exec(strParam)) != null) {
			      ret[result[1]] = result[2]
			    }
			  }
			  return ret
			},
			init(){
				this.$u.api.ActivityShelf({shelf_id: 216}).then(res => {
					this.show = true
					this.shelf1 = JSON.parse(JSON.stringify(res.datas.shelf_list))[0]
					this.shelf2 = JSON.parse(JSON.stringify(res.datas.shelf_list))[1]
					this.shelf3 = JSON.parse(JSON.stringify(res.datas.shelf_list))[2]
					this.shelf4 = JSON.parse(JSON.stringify(res.datas.shelf_list))[3]
					uni.setNavigationBarTitle({
						title: res.datas.name
					})
					this.posterImg = res.datas.img
					if(uni.getStorageSync('userInfo')){
						this.$u.mpShare = {
							title: res.datas.name,
							path: '/events/618?parent_id='+ JSON.parse(uni.getStorageSync('userInfo')).user_id,
							imageUrl: res.datas.image
						}
					}
				})
			},
			share(){
				let pages = getCurrentPages();
				let curPage = pages[pages.length - 1];
				let url = encodeURIComponent(curPage.$page.fullPath)
				uni.navigateTo({
					animationDuration: 500,
					url: '/events/events-poster?posterImg='+encodeURIComponent(this.posterImg) + '&url='+ url + '&name=五一活动'
				})
				if(uni.getStorageSync('userInfo')){
					this.addFoot('618活动-分享海报')
				}
			},
			goInfo(goods_type,goods_id,where){
				switch (goods_type){
					case 1:
						getApp().goProInfo(goods_id)
						break;
					case 2:
						uni.navigateTo({
							animationDuration: 500,
							url: '/pages/package/house-info?group_id='+goods_id
						})
						break;
					case 3:
						uni.navigateTo({
							animationDuration: 500,
							url: '/pages/package/n98-info?group_id='+goods_id
						})
						break;
				}
				if(uni.getStorageSync('userInfo')){
					this.addFoot(where,goods_id)
				}
			},
			addFoot(where,goods_id){
				this.$u.api.AddFoot({
					// #ifdef MP-WEIXIN
					type: 1,
					// #endif
					// #ifdef APP-PLUS
					type: 2,
					// #endif
					// #ifdef H5
					type: 3,
					// #endif
					store_id: uni.getStorageSync('userInfo')?JSON.parse(uni.getStorageSync('userInfo')).store_id:'',
					client: 1,
					where: where,
					stay_time: 0,
					goods_id: goods_id?goods_id:0,
					store_goods_id: 0,
					is_new: 1
				})
			},
			// loadMore(type){
			// 	switch (type){
			// 		case 1:
			// 			this.loadingMore1 = true
			// 			setTimeout(() => {
			// 				this.loadingMore1 = false
			// 				this.noMore1 = true
			// 			},1000)
			// 			break;
			// 		case 2:
			// 			this.loadingMore2 = true
			// 			setTimeout(() => {
			// 				this.loadingMore2 = false
			// 				this.noMore2 = true
			// 			},1000)
			// 			break;
			// 	}
			// }
		}
	}
</script>

<style lang="scss">
	@font-face {
		font-family: 'din';
		src: url('https://jiajudashi.oss-cn-shenzhen.aliyuncs.com/images/shop/icons/recomBrand/DIN-Bold.ttf') format('truetype');
	}
	.template-618{
		.share{
			position: fixed !important;
			left: 0;
			top: 50rpx;
			bottom: 50rpx;
			left: 50rpx;
			right: 0;
			pointer-events: none;
			z-index: 20;
			width: auto;
			height: auto;
			.share-img{
				position: absolute !important;
				width: 80rpx;
				height: 80rpx;
				pointer-events: auto;
				border-radius: 50%;
				top: initial;
				left: initial;
				right: 40rpx;
				bottom: 0;
				text-align: center;
				image{
					width: 80rpx;
					height: 80rpx;
				}
			}
		}
		.template-618-header{
			image{
				width: 100%;
			}
		}
		.template-618-title{
			text-align: center;
			image{
				width: 426rpx;
				height: 109rpx;
			}
		}
		.template-618-box{
			background-image: url('https://jiajudashi.oss-cn-shenzhen.aliyuncs.com/images/shop/2021-618/bg.png?v=1');
			background-repeat: repeat-y;
			background-size: auto;
			.template-618-box-contain{
				background-image: url('https://jiajudashi.oss-cn-shenzhen.aliyuncs.com/images/shop/2021-618/line.png');
				background-repeat: repeat-y;
				background-size: contain;
				padding-bottom: 20rpx;
			}
			.template-618-1{
				.template-618-title{
					margin-top: -100rpx;
					position: relative;
					z-index: 1;
				}
				.contain-box{
					width: 716rpx;
					margin: -30rpx auto 0;
					.contain-box-top,
					.contain-box-bot{
						image{
							width: 100%;
						}
					}
					.contain-box-center{
						background-color: #FFF;
						background-image: url('https://jiajudashi.oss-cn-shenzhen.aliyuncs.com/images/shop/2021-618/red-center.png');
						background-repeat: repeat-y;
						background-size: contain;
						padding: 0 20rpx;
						.template-618-1-item{
							display: flex;
							align-items: center;
							background: #F8F8F8;
							border: 4rpx solid #FDBD6C;
							border-radius: 8rpx;
							overflow: hidden;
							margin-top: 40rpx;
							&:first-child{
								margin-top: 0;
							}
							.template-618-1-item-image{
								position: relative;
								margin-right: 20rpx;
								&::after{
									content: '';
									background-image: url('https://jiajudashi.oss-cn-shenzhen.aliyuncs.com/images/shop/2021-618/line-left.png');
									background-size: cover;
									position: absolute;
									right: 0;
									top: 2rpx;
									width: 37rpx;
									height: 319rpx;
									z-index: 10;
								}
								image{
									width: 412rpx;
									height: 319rpx;
									-webkit-mask-box-image: url('https://jiajudashi.oss-cn-shenzhen.aliyuncs.com/images/shop/2021-618/mask-left.png');
								}
							}
							.template-618-1-item-info{
								flex: 1;
								min-width: 0;
								.goods-name{
									font-size: 28rpx;
									color: #A45B20;
									font-weight: bold;
									white-space: nowrap;
									overflow: hidden;
									text-overflow: ellipsis;
								}
								.goods-price{
									margin-top: 35rpx;
									font-size: 24rpx;
									color: #A45B20;
									text{
										color: #FD5548;
										font-size: 24rpx;
										&.num{
											font-size: 40rpx;
											color: #FD5548;
											font-family: 'din';
										}
									}
								}
								.goods-btn{
									width: 150rpx;
									background: linear-gradient(to bottom, #FCBB06, #F74436);
									border-radius: 25rpx;
									color: #FFF;
									text-align: center;
									line-height: 50rpx;
									margin: 40rpx auto 0;
								}
							}
							&:nth-child(2n){
								.template-618-1-item-image{
									margin-right: 0;
									&::after{
										background-image: url('https://jiajudashi.oss-cn-shenzhen.aliyuncs.com/images/shop/2021-618/line-right.png');
										background-size: cover;
										left: 0;
									}
									image{
										-webkit-mask-box-image: url('https://jiajudashi.oss-cn-shenzhen.aliyuncs.com/images/shop/2021-618/mask-right.png');
									}
								}
								.template-618-1-item-info{
									padding-left: 20rpx;
									order: -1;
								}
							}
						}
					}
				}
			}
			.template-618-2{
				.template-618-title{
					margin-top: 80rpx;
				}
				.contain-box-center{
					background-image: url('https://jiajudashi.oss-cn-shenzhen.aliyuncs.com/images/shop/2021-618/blue-center.png') !important;
					.template-618-1-item{
						border-color: #3d80ba !important;
						.template-618-1-item-image{
							&::after{
								background-image: url('https://jiajudashi.oss-cn-shenzhen.aliyuncs.com/images/shop/2021-618/blue-line-left.png') !important;
							}
						}
						.template-618-1-item-info{
							.goods-name{
								color: #0386CC !important;
							}
							.goods-btn{
								background: linear-gradient(to bottom, #FE777D, #E93A27) !important;
							}
						}
						&:nth-child(2n){
							.template-618-1-item-image{
								&::after{
									background-image: url('https://jiajudashi.oss-cn-shenzhen.aliyuncs.com/images/shop/2021-618/blue-line-right.png') !important;
								}
							}
						}
					}
				}
			}
			.template-618-3{
				.template-618-title{
					margin-top: 80rpx;
				}
				.template-618-3-items{
					display: flex;
					flex-wrap: wrap;
					justify-content: space-between;
					padding: 0 5rpx;
					.template-618-3-item{
						width: 325rpx;
						background: linear-gradient(to top, #FFE8C7, #FFFFFF);
						border: 2rpx solid #FDBD6C;
						border-radius: 8rpx;
						margin-top: 20rpx;
						overflow: hidden;
						&:nth-child(1),
						&:nth-child(2){
							margin-top: 0;
						}
						.item-image{
							image{
								width: 100%;
								vertical-align: top;
								border-bottom: solid 2rpx #FDBD6C;
							}
						}
						.item-goods-info{
							padding: 0 20rpx 20rpx;
						}
						.item-goods-name{
							text-align: center;
							color: #FD5548;
							white-space: nowrap;
							overflow: hidden;
							text-overflow: ellipsis;
							font-weight: bold;
							padding-top: 20rpx;
						}
						.item-goods-line{
							width: 262rpx;
							height: 3rpx;
							background: linear-gradient(90deg, #FFEDD4, #FFD69D, #FFD69E, #FFEDD4);
							margin: 20rpx auto;
						}
						.item-goods-des{
							text-align: center;
							color: #A45B20;
							font-size: 20rpx;
							white-space: nowrap;
							overflow: hidden;
							text-overflow: ellipsis;
						}
						.item-goods-btn{
							// background: linear-gradient(to bottom, #FC9106, #F74436);
							// border-radius: 25rpx;
							// color: #FFF;
							display: flex;
							align-items: flex-end;
							justify-content: center;
							margin: 20rpx -10rpx 0;
							.symbol{
								color: #A45B20;
								display: flex;
								flex-direction: column;
								text-align: right;
								white-space: nowrap;
								font-size: 20rpx;
								margin-bottom: 5rpx;
							}
							.num{
								color: #FD5548;
								font-size: 40rpx;
								font-family: 'din';
								font-weight: bold;
								text{
									font-size: 24rpx;
								}
							}
							.btn{
								margin-left: 10rpx;
								image{
									width: 51rpx;
									height: 51rpx;
								}
							}
						}
					}
				}
				.more{
					display: flex;
					align-items: center;
					justify-content: center;
					color: #A45B20;
					font-size: 28rpx;
					margin-top: 40rpx;
					.more-arrow{
						width: 32rpx;
						line-height: 32rpx;
						text-align: center;
						background-color: #A45B20;
						border-radius: 50%;
						margin-left: 8rpx;
					}
				}
			}
			.template-618-4{
				.template-618-title{
					margin-top: 80rpx;
				}
				.contain-box-center{
					background-image: url('https://jiajudashi.oss-cn-shenzhen.aliyuncs.com/images/shop/2021-618/blue-center.png') !important;
				}
			}
		}
	}
</style>
